<template>
  <div id="city-list" ref="wrapper">
    <div class="wrap content">
      <div class="title">
        热门城市
      </div>
      <div class="item-wrap">
        <div class="items">
          <div class="item" v-for="item of cityHot" :key="item.id" @click="chooseCity(item.name)">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="list" v-for="(item2, key) of abc" :key="item2.key">
        <div class="a-tit" :ref="key">
          {{key}}
        </div>
        <div id="a" class="item-wrap">
          <div class="items">
            <div class="item" v-for="item3 of item2" :key="item3.id" @click="chooseCity(item3.name)">
              {{item3.name}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default{
  name: 'cityHot',
  props: {
    cityHot: Array,
    abc: Object,
    world: String
  },
  methods: {
    chooseCity (city) {
      this.cCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['cCity'])
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  watch: {
    world () {
      this.scroll.scrollToElement(this.$refs[this.world][0])
    }
  }
}
</script>

<style lang="stylus" scoped>
  .item-wrap
    padding-right: 20px;
  .title
    line-height: 36px;
    padding: 0 10px;
    color #212121
    font-size: 14px;
    background-color #f5f5f5
  .items
    overflow hidden
    position relative
    .item
      float left
      width: 33.33%;
      box-sizing border-box
      text-align center
      line-height: 42px;
      font-size: 14px;
      border-bottom 1px solid #f5f5f5
  .items:before
    content ""
    position absolute
    top: 0px;left: 33.33%;
    width: 33.33%;
    height: 100%;
    border-left 1px solid #F5F5F5
    border-right 1px solid #F5F5F5
    z-index -1
  .a-tit
    line-height: 32px;
    padding-left: 10px;
    color #212121
    font-size: 14px;
    background-color #f5f5f5
  #city-list
    position absolute
    top: 72px;
    bottom: 0;right: 0;left: 0;
    overflow hidden
</style>
